﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Travel Goals</title>
    <link rel="stylesheet" href="styles/styles.css ">
    <link rel="stylesheet" href="styles/shared.css">
</head>
<body>
<header>
    <div id="page-logo">
        <a href="/HTMLFive/BasePage/BasePage/index.html">Travel Goals</a>
    </div>
    <nav>
        <ul>
            <li>
                <a href="places.html">Destinations</a>
            </li>
            <li>
                <a href="">About</a>
            </li>
        </ul>
    </nav>
</header>
<main>
    <section id="hero">
        <div id="hero-content">
            <h1>Castle's Travel Page</h1>
            <p>Let's explore the world together!</p>
            <a href="places.html">Discover places</a>
        </div>
    </section>
    <section id="highlights">
        <h2>Highlights</h2>
        <ul id="destinations">
            <li class="destination">
                <img src="images/places/sc1.JPG" alt="">
                <p>Miami <strong>USA</strong></p>
            </li>
            <li class="destination">
                <img src="images/places/sc2.JPG" alt="">
                <p>Toke <strong>Spain</strong></p>
            </li>
            <li class="destination">
                <img src="images/places/sc3.JPG" alt="">
                <p>Munich <strong>Germain</strong></p>
            </li>
        </ul>
    </section>
</main>
<footer>
    <ul>
        <li>
            <a href="https://www.QQ.com">
                <img src="images/icons/logo2.png" alt="QQ">
            </a>
        </li>
        <li>
            <a href="https://www.jd.com">
                <img src="images/icons/logo2.png" alt="JD">
            </a>
        </li>
    </ul>
</footer>
</body>
</html>